<template>
  <div>
    <el-card class="box-card" shadow="never" border="false">
  <template #header>
    <div class="header">
      <el-input class="search" v-model="input" placeholder="根据用户名搜索"></el-input>
      <el-button @click="clear">清空</el-button>
      <el-button type="primary" @click="searchName">搜索</el-button>
      <el-button style="float: right" type="success" @click="open('add')"> <svg-icon icon-class="edit"></svg-icon> 新增用户</el-button>
    </div>
    <el-alert
    :title="`共 ${total} 条记录`"
    effect="dark"
    :closable="false"
    show-icon
    type="info">
  </el-alert>

  </template>
 <el-table :data="tableData" stripe style="width: 100%"  v-loading="loading" >
      <el-table-column prop="id" label="序号" width="100" header-align="center" align="center"></el-table-column>
          <el-table-column prop="email" label="邮箱" width="200" header-align="center" align="center"  ></el-table-column>
          <el-table-column prop="phone" label="联系电话"  header-align="center" align="center"> </el-table-column>
          <el-table-column prop="username" label="用户名"  header-align="center" align="center"> </el-table-column>
          <el-table-column prop="permission_group_title" label="权限组名称"  header-align="center" align="center"> </el-table-column>
          <el-table-column prop="role" label="角色" header-align="center" align="center" >
          </el-table-column>
          <el-table-column label="操作" header-align="center" align="center">
            <template #default="{ row }">
              <div class="actions">
                  <el-button type="primary" icon="el-icon-edit" circle plain @click="open('edit',row.id)"></el-button>
                  <el-button type="danger" icon="el-icon-delete" circle plain @click="del(row.id)"></el-button>
              </div>
            </template>
          </el-table-column>
        </el-table>

     <div class="pagination">   <PageTool :total="total"
         :paginationPage="queryObj.page"
         :paginationPagesize="queryObj.pagesize"
         @pageChange="onPageChange"
         @pageSizeChange="onPageSizeChange"
        ></PageTool></div>
        <user-add ref="dialog" @newDataes="newDataes" @handleCloseModal="handleCloseModal" :ruleInline="ruleInline" :formBase="formBase" :pageTitle="pageTitle" :text="text"  :PermissionGroupsList="PermissionGroupsList"></user-add>
</el-card>

  </div>
</template>

<script>
import { simple } from '@/api/base/permissions'
import PageTool from '@/module-manage/components/page-tool'
import UserAdd from '@/module-manage/components/user-add'
import { list, remove, detail } from '@/api/base/users.js'
export default {
  components: {
    UserAdd,
    PageTool
  },
  data () {
    return {
      loading: false,
      input: '',
      tableData: [],
      total: 0,
      queryObj: {
        page: 1,
        pagesize: 10
      },
      type: '',
      PermissionGroupsList: [],
      text: '',
      formBase: {
        username: '',
        email: '',
        password: '',
        role: '',
        permission_group_id: '',
        phone: '',
        introduction: '',
        id: 0
      },
      ruleInline: {
        username: [
          { required: true, message: '请输入名字', trigger: 'blur' }

        ],
        email: [
          { required: true, message: '请选择活动区域', trigger: 'blur' }
        ],
        password: [
          { required: true, message: '请输入密码', trigger: 'blur' }
        ]
      }

    }
  },

  async created () {
    this.initData()
  },

  methods: {
    async initData () {
      this.loading = true
      const res = await list(this.queryObj)
      this.tableData = res.data.list
      this.total = res.data.counts
      this.loading = false
    },
    // 权限列表
    async setupData () {
      const res = await simple()
      this.PermissionGroupsList = res.data
    },

    onPageSizeChange (val) {
      this.queryObj.pagesize = val
      this.queryObj.page = 1
      this.initData()
    },
    onPageChange (val) {
      this.queryObj.page = val
      this.initData()
    },

    async del (id) {
      this.$confirm('此操作将永久删除该文件, 是否继续?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(async () => {
        const obj = { id }
        await remove(obj)
        this.initData()
        this.$message({
          type: 'success',
          message: '删除成功!'
        })
      }).catch(() => {
        this.$message({
          type: 'info',
          message: '已取消删除'
        })
      })
    },
    async  open (type, id) {
      this.type = type
      this.$refs.dialog.dialogFormV()
      for (const key in this.formBase) {
        if (key !== 'id') {
          this.formBase[key] = ''
        }
      }
      this.setupData()

      if (this.type === 'edit') {
        this.formBase.id = id
        this.formBase.password = undefined
        const { data } = await detail(this.formBase)
        for (const key in this.formBase) {
          this.formBase[key] = data[key]
        }
      }
    },
    handleCloseModal () {
      this.$refs.dialog.dialogFormH()
    },

    newDataes (data) {
      this.formBase = data
      this.initData()
    },
    clear () {
      this.input = ''
      this.initData()
    },
    searchName () {
      this.$nextTick(() => {
        this.tableData = this.renderList
      })
    }
  },
  computed: {
    pageTitle () {
      if (this.type === 'add') return '创建用户'
      if (this.type === 'edit') return '编辑用户'
      else return 'add'
    },
    renderList () {
      return this.tableData.filter(item => item.username.includes(this.input))
    }
  }
}
</script>

<style scoped lang='less'>
/deep/ .el-alert--info.is-dark{
  background-color: #f4f4f5;
  color:#909399
}
/deep/ .el-table th {
  background-color: #fafafa;
}
.box-card{
  margin: 10px auto;
  width: 95%;
  padding: 20px;
  border: 1px solid #ebeef5;
    background-color: #fff;
    color: #303133;
    -webkit-transition: .3s;
    transition: .3s;
     .pagination{
  margin-top: 10px;
  float: right;
 }
}
 .header{
  margin-bottom: 10px;
  .search{
  width: 200px;
  margin-right: 10px;
 }

 }
</style>
